const user_index = {
    template:`
            <div class="mt-4">
                <h1 class="h2 py-4">Event Search</h1>
                <div class="d-flex  justify-content-center align-items-center">
                    <div class="input-group">
                        <input type="search" class="form-control search-input" placeholder="Event Code" v-model="event_code">
                        <button class="btn btn-primary search-btn" @click="search_event">Submit</button>
                    </div>
                </div>
                <div class="mt-5">
                    <h2 class="h3 py-2">History</h2>
                    <div class="row">
                        <div class="col-4" v-for="(item,index) in history_events" :key="index">
                            <a  class="card text-primary history-event text-decoration-none">
                                <div class="card-body">
                                    <div class="card-title h5">{{item.name}}</div>
                                    <div class="card-subtitle">{{item.date}}</div>
                                </div>
                                <div class="border-top px-4 py-2">
                                    <small class="text-uppercase font">{{item.code}}</small>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
    `,
    data(){
        return {
            history_events:[],
            event_code:null
        }
    },
    methods:{
        get_history_events(){
            let history_code = store.event_search_history;
            this.history_events = [];
            history_code.forEach((item,index)=>{
                ajax.get(`event/preview/${item}`).then(res => {
                    if (res.status === 200){
                        let event  =res.data.data;
                        event.code = item;
                        this.history_events.push(event);
                    }
                })
            })
        },
        search_event(){
            ajax.get(`event/preview/${this.event_code}`).then(res =>{
                if (res.status === 200){
                    store.set_event_search_history(this.event_code);
                    this.get_history_events();
                    this.$router.push({name:'user.event.preview',params:{event_code:this.event_code}});
                }
            })
        }
    },
    mounted(){
        this.get_history_events();
        console.log('123');
    }
}